<template>
  <div class="blog-manage">
    <div class="manage-content-header">
      <h1>博客管理</h1>
      <small class="">查看博客</small>
      <div>
        <ul class="content-header-nav">
          <li>
            后台管理
            <i class="el-icon-arrow-right"></i>
          </li>
          <li>
            博客管理
            <i class="el-icon-arrow-right"></i>
          </li>
          <li>查看博客</li>
        </ul>
      </div>
    </div>
    <div class="blog-manage-container">
      <div class="box">
        <el-table
          :data="article"
          style="width: 100%; font-size: 12px !important"
          size="medium"
        >
          <el-table-column label="序号" width="180" type="index">
          </el-table-column>
          <el-table-column label="标题" width="180" prop="articleTitle">
          </el-table-column>
          <el-table-column label="类型" width="180" prop="articleClassify">
          </el-table-column>
          <el-table-column
            label="创建时间"
            width="180"
            prop="articleCreateTime"
          >
          </el-table-column>

          <el-table-column label="操作" width="180">
            <template slot-scope="scope">
              <el-button
                style="margin-right: 5px"
                size="mini"
                @click="handleEdit(scope.$index, scope.row)"
              >
                编辑
              </el-button>
              <el-popconfirm
                confirm-button-text="确定"
                cancel-button-text="取消"
                icon="el-icon-info"
                icon-color="red"
                @confirm="handleDelete(scope.$index, scope.row)"
                title="确定删除你的博客吗？"
              >
                <el-button slot="reference" size="mini" type="danger"
                  >删除</el-button
                >
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>

        <div class="pagination">
          <el-pagination
            style="margin: 0 auto"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[2, 6, 10, 15]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="userArticleTotal"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import UserApiRequest from "@/api/UserApiRequest";
const userApiRequest = new UserApiRequest();
export default {
  data() {
    return {
      article: [],
      pageSize: 10, // 组件加载的时候一页显示多少条数据
      userArticleTotal: 10, // 动态获取的当前用户的文章数量
      currentPage: 1,
      userArticleContent: "",
    };
  },
  methods: {
    // 点击编辑后通过路由传递参数给 编辑博客页面
    handleEdit(index, row) {
      let data = {
        articleId: row.articleId,
      };

      let article = {
        classify: row.articleClassify,
        content: this.userArticleContent,
        description: row.articleDescription,
        articleId: row.articleId,
        articleImagUrl: row.articleImgUrl,
        title: row.articleTitle,
      };
      this.$router.push({
        name: "sendBlog",
        params: {
          article: article,
        },
      });
    },
    //删除单条
    handleDelete(index, row) {
      let data = {
        articleId: row.articleId,
      };
      userApiRequest.delUserArticle(data).then((res) => {
        if (res.code === 0) {
          this.$message({
            type: "success",
            message: "删除文章成功",
          });
          this.article.splice(index, 1);
        }
      });
    },
    getArticle() {
      let data = {
        userId: this.$store.state.userInfo.uid,
        offset: (this.currentPage - 1) * this.pageSize,
        limit: this.pageSize,
      };
      userApiRequest.getArticleByUserId(data).then((res) => {
        this.article = res.data.userArticleVos;
      });
    },
    // 用户点击显示页面显示几条数据时触发
    handleSizeChange(newSize) {
      this.pageSize = newSize;
      this.currentPage = 1;
      // 发送请求
      this.getArticle();
    },
    // 用户点击下一页时触发
    handleCurrentChange(newPage) {
      this.currentPage = newPage;
      this.getArticle();
    },
  },
  mounted() {
    // 组件加载的时候 获取当前登录用户的文章信息 并分页
    let data = {
      userId: this.$store.state.userInfo.uid,
      offset: (this.currentPage - 1) * this.pageSize,
      limit: this.pageSize,
    };
    userApiRequest.getArticleByUserId(data).then((res) => {
      this.article = res.data.userArticleVos;
      this.userArticleTotal = res.data.userBlogCount;
    });
  },
};
</script>

<style scoped lang="scss">
.blog-manage {
  .manage-content-header {
    position: relative;
    padding: 15px 15px 0 15px;
    h1 {
      font-size: 24px;
      font-weight: 400;
    }
    small {
      margin-left: 5px;
      font-size: 15px;
    }
    h1,
    small,
    ul {
      display: inline-block;
    }
    .content-header-nav {
      position: absolute;
      top: 30px;
      right: 15px;
      float: right;
      li:first-child {
        font-weight: 700;
        color: #303133;
      }
      li {
        color: #606266;
        float: left;
        font-size: 12px;
      }
    }
  }
}
.blog-manage-container {
  display: flex;
  position: relative;
  border-radius: 3px;
  background: #fff;
  border-top: 3px solid #3c8dbc;
  padding: 20px;
  margin-top: 20px;
  margin-bottom: 20px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  .box {
    margin: 0 auto;
  }

  .pagination {
    display: flex;
    margin-top: 20px;
  }
}
</style>